<template>
  <div class="personal-main">
    <div class="personal-pay">
      <h3><i>还款中心</i></h3>



      <el-steps  v-if="legal.sumMoney != legal.payMoney" :active="active" style="margin: 40px 40px 40px 80px">
        <el-step title="归还贷款"></el-step>
        <el-step title="还款"></el-step>
        <el-step title="还款成功"></el-step>
      </el-steps>

      <div v-if="active === 1 && legal.sumMoney === legal.payMoney && legal.sumMoney!=null" class="user-borrower">
        <el-form label-width="100px" style="margin-right: 300px">

          <el-descriptions style="margin-left: 180px" title="贷款信息" direction="vertical" :column="2" border>
            <el-descriptions-item label="法人姓名">{{legal.legalName}}</el-descriptions-item>
            <el-descriptions-item label="法人年龄">{{legal.legalAge}}</el-descriptions-item>
            <el-descriptions-item label="法人性别">{{legal.legalSex}}</el-descriptions-item>

            <el-descriptions-item label="借款金额">{{ legal.totalMoney }}元</el-descriptions-item>
            <el-descriptions-item label="总还款金额">{{ legal.sumMoney }}元</el-descriptions-item>
            <el-descriptions-item label="利息">{{ legal.interestMoney }}元</el-descriptions-item>
            <el-descriptions-item label="已还金额">{{ legal.payMoney }}元</el-descriptions-item>
            <el-descriptions-item label="发放账号">{{ legal.bankAccount }}</el-descriptions-item>
            <el-descriptions-item label="贷款期限">{{ legal.yeard }}个月</el-descriptions-item>
            <el-descriptions-item label="贷款时间">{{ dates }}</el-descriptions-item>
            <el-descriptions-item label="贷款用途">
              <el-tag size="small">{{legal.textArea}}</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-form>
      </div>
      <div v-if="active === 1 && legal.sumMoney != legal.payMoney" class="user-borrower">
        <el-form label-width="100px" style="margin-right: 300px">

          <el-descriptions style="margin-left: 180px" title="贷款信息" direction="vertical" :column="2" border>
            <el-descriptions-item label="法人姓名">{{legal.legalName}}</el-descriptions-item>
            <el-descriptions-item label="法人年龄">{{legal.legalAge}}</el-descriptions-item>
            <el-descriptions-item label="法人性别">{{legal.legalSex}}</el-descriptions-item>

            <el-descriptions-item label="借款金额">{{ legal.totalMoney }}元</el-descriptions-item>
            <el-descriptions-item label="总还款金额">{{ legal.sumMoney }}元</el-descriptions-item>
            <el-descriptions-item label="利息">{{ legal.interestMoney }}元</el-descriptions-item>
            <el-descriptions-item label="已还金额">{{ legal.payMoney }}元</el-descriptions-item>
            <el-descriptions-item label="发放账号">{{ legal.bankAccount }}</el-descriptions-item>
            <el-descriptions-item label="贷款期限">{{ legal.yeard }}个月</el-descriptions-item>
            <el-descriptions-item label="贷款时间">{{ dates }}</el-descriptions-item>
            <el-descriptions-item label="贷款用途">
              <el-tag size="small">{{legal.textArea}}</el-tag>
            </el-descriptions-item>
          </el-descriptions>

          <el-form-item style="margin: 20px 0;text-align: center">
            <el-button
                type="primary"
                :disabled="submitBtnDisabled"
                @click="save"
            >
              立即还款
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <div v-if="legal.totalMoney === legal.payMoney" class="user-borrower">
        <el-row style="margin-left: 300px">
          <el-col :sm="12" :lg="6">
            <el-result icon="info" title="信息提示" subTitle="您当前没有需要的还款信息">
            </el-result>
          </el-col>
        </el-row>
      </div>

      <div v-if="active === 2" class="user-borrower" style="margin-left: 50px">

        <el-form label-width="120px">
          <el-form-item>
            还款类型：
            <template>
              <el-radio v-model="radio" label="1">本期还款</el-radio>
              <el-radio v-model="radio" label="2">全部还款</el-radio>
            </template>
          </el-form-item>
          <el-form-item>
            还款金额：
            <el-input
                style="width: 200px;"
                v-model="Money"
                :disabled="true">
            </el-input>&nbsp;&nbsp;元
          </el-form-item>
        </el-form>



        <el-form label-width="120px">
          <el-form-item>
            <el-button
                style="margin-left: 50px"
                type="primary"
                @click="prev"
            >
              返回
            </el-button>
            <el-button
                style="margin-left: 80px"
                type="primary"
                @click="toBorrow"
            >
              还款
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <div v-if="active === 3" class="user-borrower">
        <el-row>

          <el-col :sm="12" :lg="6" style="margin-left: 300px" v-if="borrowInfoStatus == 1">
            <el-result icon="success" title="还款成功">
              <template slot="extra">
                <el-button type="primary" @click="cancled" size="medium">返回</el-button>
              </template>
            </el-result>
          </el-col>

          <el-col :sm="12" :lg="6" style="margin-left: 300px" v-if="borrowInfoStatus == -1">
            <el-result icon="error" title="还款失败" subTitle="">
              <template slot="extra">
                <el-button type="primary" @click="cancled" size="medium">返回</el-button>
              </template>
            </el-result>
          </el-col>

        </el-row>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "repayment",
  data() {
    return {
      //法人
      /*legal:{
        yeard:12,//贷款年限
        totalMoney:100,//借款金额
        sumMoney:101,//总还款金额
        payMoney:10,//已还款金额
        payMonthMoney:10.2,//月还款金额
        lastMoney:95,//剩余还款金额
        interestMoney:1,//利息
        bankAccount:'123456789123',//发放账号
        textarea:'买卖材料',//贷款用途
        legalName:'张三',//法人姓名
        legalage:26,//法人年龄
        legalsex:'男',//法人性别
        contactsRelation:'上级',//你和联系人关系
        dayTime:'2021-09-23',
      },*/
      legal:[],
      legalData:[],
      way:'',//还款类型：

      active: 1, //步骤
      borrowInfoStatus: 1, //还款状态
      submitBtnDisabled: false,

      radio:'1',
      Money:'',//现在的还款金额
      lastMoney:'',
      payMonthMoney:'',
      sumMoney:'',//总还款金额
      nowMoney:'',//之前已还款金额
      dates:''

    }
  },
  created() {
    this.$axios
        .get(`http://localhost:9090/loan/legal/getlegalById`).then(
        response => {
          this.legal = response.data;
          this.legalData = response.data;
          this.payMonthMoney=response.data.payMonthMoney;
          this.lastMoney=response.data.lastMoney;
          this.sumMoney=response.data.sumMoney;
          this.nowMoney=response.data.payMoney;

          //日期转换
          let dt = new Date(response.data.dateTime)
          this.dates=dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
        }
    )
  },
  watch:{
    radio:{
      deep:true,
      handler(value){
        if (value==1){
          this.Money=this.payMonthMoney;
          this.way='本期还款'
        }else {
          this.Money=this.lastMoney;
          this.way='全部还款'
        }
      }
    }
  },
  methods: {
    toBorrow(){
      this.$axios
          .post(`http://localhost:9090/loan/information/addInformation?way=`+this.way
              +'&paymoney='+this.Money
          +'&sumMoney='+this.sumMoney
          +'&nowMoney='+this.nowMoney).then(
          response => {
            console.log(response.data)
            if (response.data.success==true){
              this.$message({
                type: 'success',
                message: "还款成功"
              })
              this.active++
            }else {
              this.$message({
                type: 'info',
                message: "还款失败"
              })
            }

          }
      )

    },

    //提交借款申请
    prev() {
      this.active -= 1
    },
    cancled() {
      this.active = 1;
    },
    //提交借款申请
    save() {
      this.active++
    },


  },


}
</script>

<style scoped>

</style>
